<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw">
    <vxe-form :data="formData" :items="formItems" titleColon :rules="formRules" ref="VXEFormRef">
      <template #myregion="{ data }">
        <a-input v-model="data.region" placeholder="自定义插槽模板"></a-input>
      </template>
    </vxe-form>
    <br />
    <div>
      <a-button type="primary" @click="onValidateForm">表单验证</a-button>
      <a-button @click="onValidateName">验证部分字段</a-button>
      <a-button @click="onReset">重置</a-button>
      <a-button @click="onClearError">清除错误提示</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { VXETable } from 'vxe-table'
const formData = reactive({
  name: '',
  nickname: '',
  sex: '0',
  role: '',
  age: 2,
  val1: [],
  val2: false,
  val3: '',
  flag: false,
  region: '',
})

const VXEFormRef = ref()
async function doValidate() {
  const resp = await VXEFormRef.value.validate()
  console.log('resp', resp)
}
function onValidateForm() {
  doValidate()
}
function onReset() {
  VXEFormRef.value.reset()
}
async function onValidateName() {
  const resp = await VXEFormRef.value.validateField(['name', 'age'])
  console.log('resp', resp)
}
function onClearError() {
  VXEFormRef.value.clearValidate(['age'])
}
const formRules = ref({
  name: [
    { required: true, message: '请输入名称' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符' },
  ],
  sex: [{ required: true, message: '请选择性别' }],
  age: [
    { required: true, message: '请输入年龄' },
    {
      validator({ itemValue }) {
        // 自定义校验
        if (Number(itemValue) > 35 || Number(itemValue) < 18) {
          return new Error('年龄在 18 ~ 35 之间')
        }
      },
    },
  ],
  region: [{ required: true, message: '请输入地区' }],
})
const formItems = ref([
  { field: 'name', title: '名称', span: 8, itemRender: { name: 'VxeInput', props: { placeholder: '请输入名称' } } },
  {
    field: 'sex',
    title: '性别',
    span: 8,
    itemRender: {
      name: 'VxeSelect',
      options: [
        { value: '0', label: '女' },
        { value: '1', label: '男' },
      ],
      props: { placeholder: '请选择性别' },
    },
  },
  { field: 'role', title: '角色', span: 8, itemRender: { name: 'VxeInput', props: { placeholder: '请输入角色' } } },
  {
    field: 'age',
    title: '年龄',
    span: 24,
    itemRender: { name: 'VxeInput', props: { type: 'number', placeholder: '请输入年龄' } },
  },
  {
    field: 'val1',
    title: '复选框-组',
    span: 12,
    itemRender: {
      name: 'VxeCheckboxGroup',
      options: [
        { label: '爬山', value: '11' },
        { label: '健身', value: '22' },
      ],
    },
  },
  { field: 'val2', title: '复选框', span: 12, itemRender: { name: 'VxeCheckbox' } },
  {
    field: 'val3',
    title: '单选框',
    span: 12,
    itemRender: {
      name: 'VxeRadioGroup',
      options: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' },
      ],
    },
  },
  {
    field: 'flag',
    title: '开关',
    span: 24,
    itemRender: { name: 'VxeSwitch', props: { openLabel: '是', closeLabel: '否' } },
  },
  { field: 'region', title: '地区', span: 24, itemRender: {}, slots: { default: 'myregion' } },
])
const submitEvent = () => {
  VXETable.modal.message({ content: '保存成功', status: 'success' })
}
const resetEvent = () => {
  VXETable.modal.message({ content: '重置事件', status: 'info' })
}
</script>
